<template>
  <view class="kkKatex" :class="{ kkKatexChat: from === 'chat' }">
    <view v-for="(value, index) in katexStrArr" :key="index">
      <view v-if="isKatexStr(value, true)" :style="'margin-right: 6px'">
        <rich-text class="textWrap" :nodes="handleKatexStr(value)"></rich-text>
      </view>
      <view v-else class="textWrap">{{ value }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { handleKatexStr, isKatexStr } from "@/pagesA/utils/util";

const props = defineProps({
  from: {
    // ai AI回复 chat 会话聊天框
    type: String,
    default: "ai",
  },
  data: {
    type: Object,
    default: {},
  },
});

const katexStrArr = computed(() => {
  let katesStr = props.data;
  if (katesStr) {
    katesStr = katesStr.replace(/<[^>]*>/g, "");
    katesStr = katesStr.replace(/&gt;/g, ">");
    katesStr = katesStr.replace(/#/g, "");
    return katesStr.split("$") || [];
  }
  return [];
});
</script>

<style lang="scss" scoped>
.kkKatex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 28rpx;
  color: #333333;
  line-height: 42rpx;
}
.kkKatexChat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 38rpx;
}
</style>
